{include file="public/_header" /}
<link rel="stylesheet" type="text/css" href="/zTree/css/zTreeStyle/zTreeStyle.css">
<style>
    #mainForm {
        max-width: 700px;
        margin: 30px auto;
    }

    #mainForm .layui-form-item {
        margin-bottom: 25px;
    }
</style>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">添加角色</div>
        <div class="layui-card-body">
            <form class="layui-form" id="mainForm">
                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">角色名称:</label>
                    <div class="layui-input-block">
                        <input name="title" id="title" placeholder="请输入" class="layui-input"
                               lay-verType="tips"/>
                    </div>
                </div>
                <!-- 权限 -->
                <div class="layui-form-item">
                    <label class="layui-form-label">菜单:</label>
                    <div class="layui-input-block">
                        <div class="ztree" id="treeDemo"></div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">描述:</label>
                    <div class="layui-input-block">
                        <textarea name="remark" placeholder="描述" class="layui-textarea"></textarea>
                    </div>
                </div>

                <div class="form-group-bottom text-right">
                    <button type="reset" class="layui-btn layui-btn-primary">&emsp;重置&emsp;</button>
                    <button class="layui-btn" lay-filter="add" lay-submit>&emsp;提交&emsp;</button>
                </div>
            </form>
        </div>
    </div>
</div>
{include file="public/_footer"}
<script src="/zTree/js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="/zTree/js/jquery.ztree.core.js" type="text/javascript"></script>
<script src="/zTree/js/jquery.ztree.excheck.js" type="text/javascript"></script>
<script>
    layui.use(['form', 'element'], function () {
        var form = layui.form;
        var $ = layui.jquery;
        form.on('submit(add)', function (data) {
            var arr = data.field;
            if ($.trim(arr.title) === '') {
                layer.msg('菜单标题不能为空');
                return false;
            }
            // 获取选择的数据
            var nodes = getTreeNodes();
            if(nodes.length === 0) {
                layer.msg('请选择菜单');
                return false;
            }
            arr.menus = nodes;
            // 提交数据
            $.post('{:url("add")}', arr, function (res) {
                if(res.code === 0) {
                    layer.msg(res.msg);
                    setTimeout(function () {
                        window.location.href = "{:url('index')}";//'index.html';
                    },500);
                }else {
                    layer.msg(res.msg);
                }
            },'JSON');
            return false;
        });
        getAllMenu();
    });
    function getAllMenu() {
        $.getJSON('{:url("menu/menus")}',{},function (res) {
            initTree(res.data);
        });
    }

    function initTree(data) {
        var zNodes = [];
        for(var i=0;i<data.length;++i) {
            zNodes.push({
                id : data[i].id,
                pId : data[i].pId,
                name : data[i].title,
                open : true
            });
        }
        var setting = {
            check: {
                enable: true
            },
            data: {
                simpleData: {
                    enable: true
                }
            }
        };
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    }
    
    function getTreeNodes() {
        var treeObj = $.fn.zTree.getZTreeObj("treeDemo");//zTree对象
        var nodes = treeObj.getCheckedNodes(true); //所有一级节点
        var data = [];
        for (var i=0;i<nodes.length;++i) {
            data.push(nodes[i].id);
        }
        return data;
    }
    
</script>
</body>
</html>